<template>
  <div>
    <el-form size="small" :inline="true" :model="whereData" class="search-from">
      <!-- <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.dealNo" placeholder="合同名称"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.contract_no" placeholder="合同编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          style="width: 260px"
          v-model="daterange"
          type="daterange"
          @change="handleDateChange($event, 'time_end_range')"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="到期时间(开始)"
          end-placeholder="到期时间(结束)"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      @sort-change="sortList"
      v-loading="isLoading"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="id"
        sortable="custom"
        label="ID">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="contract_name"
        label="合同名称">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="contract_no"
        label="合同编号">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="time_end"
        :formatter="formatTime"
        label="合同到期时间">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="time_add"
        :formatter="formatTime"
        label="发起时间">
      </el-table-column>
      <el-table-column
        align="center"
        sortable="custom"
        show-overflow-tooltip
        prop="status_sign"
        label="合同状态">
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="address"
        label="操作">
        <template slot-scope="scope">
          <!-- <el-tooltip :manual="true" :value="currentStep === 3" effect="dark" placement="top-start">
            <div slot="content" class="tip"><div>步骤 {{currentStep}}/4</div> <div>请签署合同</div></div>
          </el-tooltip> -->
          <el-button type="primary" size="mini" @click="download(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
import tableMixin from '@/common/mixins/tableData'
import { mapGetters } from 'vuex'
export default {
  name: 'wait-component',
  mixins: [tableMixin],
  data() {
    return {
      listApi: '/personal/contract/get',
      whereData: {
        status_sign: '待签约',
        expired: 0,
        contract_no: ''
      },
      daterange: ''
    }
  },
  computed: {
    ...mapGetters([
      'currentStep'
    ])
  },
  methods: {
    download(row) {
      this.$http.get(`/personal/contract/download/${row.id}`).then(res => {
        if (res.status === 1) {
          window.open(res.data.docs[0].fileUrl)
        }
      })
    }
  }
}
</script>